const utils = {
  /**
   * 存cookie
   * @param {string} key     要存的cookie的名称
   * @param {string} value   要存的cookie的值
   * @param {object} option  { expires: 7, path: '/' } 存一个7天过期的根目录的cookie
   */
  // ES6增强对象写法，不用谢键值对了，直接 方法名 () {}
  setCookie (key, value, option) {
    // 存的时候cookie的值编码
    var str = `${key}=${encodeURIComponent(value)}`
    if (option) {
      if (option.path) {
        str += `;path=${option.path}`
      }
      if (option.expires) {
        var date = new Date()
        date.setDate(date.getDate() + option.expires)
        str += `;expires=${date.toUTCString()}`
      }
    }
    document.cookie = str
  },

  /**
   * 取cookie
   * @param {string} [key] 要取的cookie的名称，如果不传返回所有cookie
   * @return {string || object}  取出来的cookie的值，如果没有可以返回整个对象
   */
  getCookie (key) {
    var str = document.cookie
    var cookies = str.split('; ')
    // 遍历cookies数组，每一个元素再按照=拆开成属性名和属性值
    var obj = {}
    cookies.forEach(cookie => {
      var arr = cookie.split('=')
      // arr[0]作为属性名，arr[1]作为属性值放入obj
      // 取的时候把属性值解码
      obj[arr[0]] = decodeURIComponent(arr[1])
    })
    return key ? obj[key] : obj
  },

  /**
   * 删除cookie
   * @param {string} key 要删除的cooie的名称
   * @param {string} [path] 可选参数，cookie的路径 
   */
  removeCookie (key, path) {
    var date = new Date()
    date.setDate(date.getDate() - 1)
    var str = `${key}=0;expires=${date.toUTCString()}`
    if (path) {
      str += `;path=${path}`
    }
    document.cookie = str
  },

  /**
   * ajax的get请求
   * @param {string}     url    请求的地址
   * @param {object}     query  请求携带的参数
   * @param {function}   fn     成功之后的回调函数
   * @param {boolean}    isJson 返回的数据是否为json格式，默认为true
   */
  get (url, query, fn, isJson = true) {
    if (query) {
      url += '?'
      for (var key in query) {
        url += `${key}=${query[key]}&`
      }
      url = url.slice(0, -1)
    }

    var xhr = new XMLHttpRequest()
    xhr.open('get', url)
    xhr.send()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          var data = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
          fn && fn(data)
        }
      }
    }
  },

  /**
   * ajax的post请求
   * @param {string}     url    请求的地址
   * @param {object}     query  请求携带的参数
   * @param {function}   fn     成功之后的回调函数
   * @param {boolean}    isJson 返回的数据是否为json格式，默认为true
   */
  post (url, query, fn, isJson = true) {
    var str = ''
    if (query) {
      for (var key in query) {
        str += `${key}=${query[key]}&`
      }
      str = str.slice(0, -1)
    }

    var xhr = new XMLHttpRequest()
    xhr.open('post', url)
    // 设置请求头，在open之后send之前
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    xhr.send(str)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          var data = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
          fn && fn(data)
        }
      }
    }
  },
  ajax () {
    // TODO：
    // 既可以发送get，也可以发送post

  },
  /**
   * jsonp请求
   * @param {string} url     接口地址
   * @param {string} cbName  全局回调函数名
   * @param {object} query   其他一些参数 
   */
  jsonp (url, cbName, query) {
    // 创建script
    url += `?cb=${cbName}`
    if (query) {
      for (var key in query) {
        url += `&${key}=${query[key]}`
      }
    }
    var script = document.createElement('script')
    script.src = url
    document.body.appendChild(script)
    // 由于script请求时异步的，所以只要存在就行，请求发出去之后就可以移除了
    document.body.removeChild(script)
  },

  /**
   * 基于promise的ajax的get请求
   * @param {string}     url    请求的地址
   * @param {object}     query  请求携带的参数
   * @param {boolean}    isJson 返回的数据是否为json格式，默认为true
   */
  fetchGet (url, query, isJson = true) {
    if (query) {
      url += '?'
      for (var key in query) {
        url += `${key}=${query[key]}&`
      }
      url = url.slice(0, -1)
    }
    // 在这里把promise的实例return出去，这样将来调用这个方法的时候才能在后面.then
    return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest()
      xhr.open('get', url)
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var data = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
            resolve(data)
          } else {
            reject()
          }
        }
      }
    })
  },

  /**
   * 基于promise的ajax的post请求
   * @param {string}     url    请求的地址
   * @param {object}     query  请求携带的参数
   * @param {boolean}    isJson 返回的数据是否为json格式，默认为true
   */
  fetchPost (url, query, isJson = true) {
    var str = ''
    if (query) {
      for (var key in query) {
        str += `${key}=${query[key]}&`
      }
      str = str.slice(0, -1)
    }
    // 在这里把promise的实例return出去，这样将来调用这个方法的时候才能在后面.then
    return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest()
      xhr.open('post',url)
      // 设置请求头，在open之后send之前
      xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
      xhr.send(str)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var data = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
            resolve(data)
          } else {
            reject()
          }
        }
      }
    })
  }
}
